<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="maskCont">
				
				<view class="headImgCont">
					<avatar 
						selWidth="400upx" selHeight="400upx" stretch="shortSel" :inner="true" @upload="myUpload" :avatarSrc="formData.enterprise_logo"
						>
					</avatar>
				</view>
				<view class="maskHead">企业logo</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">企业名称</view>
				    </view>
					<view class="inputValue">
						<input maxlength="50" v-model="formData.enterprise_name" placeholder="请输入企业名称"  />
					</view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">联系电话</view>
				    </view>
					<view class="inputValue">
						<input maxlength="11" type="number" v-model="formData.enterprise_mobile" placeholder="请输入企业联系电话"  />
					</view>
					<view v-if="checkPhone(formData.enterprise_mobile)" class="iconfont icon-gouxuan1"></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">联系人</view>
				    </view>
					<view class="inputValue">
						<input maxlength="20" v-model="formData.enterprise_person" placeholder="请输入联系人姓名"  />
					</view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">企业地址</view>
				    </view>
					<view class="inputValue">
						<input maxlength="50" v-model="formData.enterprise_address" placeholder="请输入企业地址"  />
					</view>
				</view>
				<view v-if="!formData.enterprise_file" class="fileGroup" @click="upComImgFn">
					<view class="iconfont icon-yingyezhizhao"></view>
				</view>
				<view class="fileGroupText" v-if="!formData.enterprise_file">
					<text class="mustIcon">*</text>
					<text>请上传企业营业执照</text>
				</view>
				<image class="comImg" @click="upComImgFn" mode="widthFix" v-if="formData.enterprise_file" :src="formData.enterprise_file" ></image>
			</view> 
			<view class="saveBtn" @click="saveFn">保存企业信息</view>
			<u-notify ref="uNotify" ></u-notify>
			<u-toast ref="uToast"></u-toast>
			<subLoad v-if="showSub"></subLoad>
			<load v-if="!showCont"></load>
			<u-modal :show="showModal" :showCancelButton="true" @cancel="showModal = false" title="操作提示" @confirm="modalSure"  :content='modalCont'></u-modal>
		</view>
	</view>
</template>

<script>
	import ruleCheck from '@/utils/ruleCheck.js'
	import api from '@/http/api.js'
	import subLoad from '@/components/sub.vue'
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import upfile from '@/utils/upfile.js'
	import load from '@/components/load.vue'
	export default {
		components:{subLoad,avatar,load},
		data() {
			return {
				showSub:false,
				showCont:false,
				showModal:false,
				modalCont:'确认企业信息无误并绑定此企业',
				comStatus:'',
				formData:{
					enterprise_name:'',
					enterprise_address:'',
					enterprise_mobile:'',
					enterprise_person:'',
					enterprise_file:'',
					enterprise_logo:'/static/img/xj.png',
				},
				
			};
		},
		methods:{
			 upComImgFn(){
				uni.chooseImage({
					success: async (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						if(tempFilePaths.length>0){
							this.showSub = true
							const result = await upfile.upfile(tempFilePaths[0],'')
							this.formData.enterprise_file = result
							this.showSub = false
						}
					}
				});
			},
			myUpload(rsp) {
				this.showSub = true
				upfile.upfile(rsp.path).then((res)=>{
					this.formData.enterprise_logo = res
					this.showSub = false
				})
			},
			checkPhone(){
				return !ruleCheck.checkPhone(this.formData.enterprise_mobile)
			},
			modalSure(){
				this.showSub = true
				this.showModal = false
				let url = '/api/Crew/crewEnterpriseEdit'
				if(this.comStatus==1){
					url = '/api/Crew/crewEnterprise'
				}
				api.getRequst(this.formData,url).then((res)=>{
					if(res.code==1){
						uni.showToast({
							title: '绑定成功',
							icon: 'success'
						});
					}
					this.showSub = false
				})
			},
			saveFn(){
				let data = this.formData
				
				let tipData = {
					bgColor: '#e47470',
					message: '',
					
				}
				if(data.enterprise_logo=='/static/img/xj.png'){
					tipData.message = '请输入上传企业logo'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(!data.enterprise_name){
					tipData.message = '请输入企业名称'
					this.$refs.uNotify.show(tipData)
					return false
				}else if(ruleCheck.checkPhone(data.enterprise_mobile)){
					tipData.message = ruleCheck.checkPhone(data.enterprise_mobile)
					this.$refs.uNotify.show(tipData)
					return false
				}if(!data.enterprise_person){
					tipData.message = '请输入联系人姓名'
					this.$refs.uNotify.show(tipData)
					return false
				}if(!data.enterprise_address){
					tipData.message = '请输入企业地址'
					this.$refs.uNotify.show(tipData)
					return false
				}if(!data.enterprise_file){
					tipData.message = '请上传企业营业执照'
					this.$refs.uNotify.show(tipData)
					return false
				}
				this.showModal = true
				
			},
			getData(){
				let data = {}
				api.getRequst(data,'/api/Crew/getData').then((res)=>{
					if(res.code==1){
						this.comStatus = res.data.crew_enterprise.is_crew_enterprise
						if(this.comStatus!=1){
							this.formData = res.data.crew_enterprise.crew_enterprise
						}
					}
					this.showCont = true
				})
			}
		},
		onLoad(option) {
			this.getData()
		}
	}
</script>

<style lang="scss">
.showCont{
	min-height: 100vh;
	background-color: #f8f8f8;
	box-sizing: border-box;
	padding-bottom: 30rpx;
	.maskCont{
		background-color: #fff;
		border-radius: 30rpx;
		padding: 40rpx 30rpx 60rpx;
		width: 92%;
		margin: 30rpx auto 30rpx;
		box-sizing: border-box;
		.maskHead{
			font-size: 28rpx;
			text-align: center;
		}
		.headImgCont{
			display: flex;
			justify-content: center;
			margin-top: 30rpx;
		}
		.formItem{
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			background-color: #f8f8f8;
			padding: 25rpx 50rpx;
			box-sizing: border-box;
			border-radius: 50rpx;
			.inputName {
			  width: 140rpx;
			  position: relative;
			  font-size: 28rpx;
			  .mustIcon {
				font-size: 28rpx;
				top: 0;
				left: -16rpx;
				position: absolute;
				color: #ff5757;
			  }
			}
			.inputOut {
				flex: 1;
				width: 3rem;
				position: relative;
				.inputMask {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					z-index: 2;
				  }
				  input{
					width: 100%;
					border: none;
					background: none;
					outline: none;
					position: relative;
					z-index: 1;
				  }
			}
			.inputValue{
				flex: 1;
				width: 100rpx;
			}
			.getCode{
				font-size: 24rpx;
				color: #3f55cc;
			}
			.disCode{
				color:#999;
			}
			.icon-gouxuan1,.icon-xiala{
				color: #3f55cc;
			}
		}
		
		.fileGroup{
			margin-top: 30rpx;
			background-color: #e8eefd;
			border-radius: 15rpx;
			width: 100%;
			height: 400rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconfont{
				color: #666;
				font-size: 300rpx;
			}
		}
		.comImg{
			margin-top: 30rpx;
			width: 100%;
			border-radius: 15rpx;
		}
		.fileGroupText{
			text-align: center;
			margin-top: 30rpx;
			.mustIcon {
				font-size: 28rpx;
				color: #ff5757;
			}
		}
		
	}
	.saveBtn{
		width: 92%;
		margin: 30rpx auto 0;
		border-radius: 50rpx;
		background-image: linear-gradient(to right bottom,#a3bffe,#3f55cc);
		color: #fff;
		font-size: 24rpx;
		padding: 30rpx 0;
		text-align: center;
		z-index: 2;
	}
	
}
</style>
